<template>
    <div class="content">
        <TableLayout form-title="查询条件">
            <el-form :model="query" class="formInline" label-width="100px" slot="form" v-collapse="true" label-position="right">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份">
                          <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区">
                          <city v-model="query.cityId" :province="query.provinceId" ></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县">
                            <region v-model="query.areaId" :city="query.cityId" ></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="广告类型"> 
                            <el-select v-model="query.advType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in form.advList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="广告名称">
                            <el-input v-model="query.advName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select v-model="query.advState" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in form.stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="发布人">
                            <el-input v-model="query.advFounder" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="formBtn">
                    <div class="btnPosition"> 
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </div>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <!-- <span class="table-title-span"></span> -->
                <div class="btnPosition">
                    <el-button @click="batchadd">添加</el-button>
                    <el-button @click="batchDel">批量删除</el-button>
                </div>
            </div>
            <el-table v-loading='loading' border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :selectable="fn" align="center"></el-table-column>
                <el-table-column label="广告名称" align="center" min-width="140">
                    <template scope="scope">
                        <span class="link-src" @click="btnView(scope.row)">{{scope.row.sName | isNull}}</span>  
                    </template>
                </el-table-column>
               <el-table-column label="广告类型" align="center" min-width="140">
                    <template scope="scope">
                        <span>{{scope.row.sType=='0'?'积分商城顶部广告位':scope.row.sType=='1'?'e学云教育平台首页广告位':scope.row.sType=='2'?'APP全屏广告位':scope.row.sType=='3'?'周边教育广告':scope.row.sType=='4'?'课程学习广告':'--'}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="广告链接" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sLink  | isNull}}</span>  
                    </template>
                </el-table-column> -->
                <el-table-column label="发布人" align="center" min-width="95">
                    <template scope="scope">
                        <span>{{scope.row.publishUserName  | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" min-width="160" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime  | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="上线时间" min-width="160" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOnlineTime  | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="审核人" align="center" min-width="95">
                    <template scope="scope">
                        <span>{{scope.row.applyUserName  | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sStatus=='0'?'审核中':scope.row.sStatus=='1'?'驳回':scope.row.sStatus=='2'?'上线':scope.row.sStatus=='3'?'下线':'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="提交机构" align="center" min-width="160">
                    <template scope="scope">
                        <span v-if="scope.row.isAdmin == '0'">总部</span>
                        <span v-else>{{(!scope.row.provinceName?'':scope.row.provinceName)+(!scope.row.cityName?'':('-' +scope.row.cityName)) + (!scope.row.areaName?'':('-' + scope.row.areaName))}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="点击次数" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sClickNum?scope.row.sClickNum:'0'}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="可见级别" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sLevel=='0'?'全国':scope.row.sLevel=='1'?'省级':scope.row.sLevel=='2'?'市级':scope.row.sLevel=='3'?'区级':'--'}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column  label="备注" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sDesc  | isNull}}</span>  
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="245">
                    <template scope="scope">
                        <!-- isAdmin 类型 0:系统管理员 1:代理商 2:业务员 3:公司员工 4 其他 -->
                        <!-- <el-button @click="btnView(scope.row)" type="text" class="btn-success">查看</el-button> -->
                        <template v-if="scope.row.isAdmin != '0' && scope.row.isAdmin != '3'">
                            <el-button v-if="scope.row.sStatus == '2'" @click="offLine(scope.row)" type="text" class="btn-success">下线</el-button>
                            <el-button v-if="scope.row.sStatus == '3' || scope.row.sStatus == '1'" @click="edit(scope.row)" type="text" class="btn-success">编辑</el-button>
                            <el-button v-if="scope.row.sStatus == '3' || scope.row.sStatus == '1'" @click="deleteList(scope.row)" type="text" class="btn-success">删除</el-button>
                            <el-button v-if="scope.row.sStatus == '3' || scope.row.sStatus == '1'" @click="sendAudit(scope.row)" type="text" class="btn-success">送审</el-button>
                        </template>
                        <el-button v-if="scope.row.sLink && scope.row.sShowType=='0'" @click="clipboardSuccessHandler(scope.row.sLink)" type="text" class="btn-success">复制链接</el-button>
                        <span v-if="!scope.row.sLink && scope.row.sStatus == '0'">--</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { listAdvert, removeAdvert, updateAdvertStatus } from 'api/advMangement';
import { mapState, mapActions } from 'vuex';
import Clipboard from 'v-clipboard';
export default {
    components: {
        TableLayout,
        province,
        city,
        region,
        Clipboard
    },
    data() {
        return {
            loading: false,
            form: {

                //  广告类型（0：积分商城顶部广告位  1：e学云教育平台首页广告位  2：APP全屏广告位 3：周边教育广告 4：课程学习广告）
                advList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '0',
                    label: '积分商城顶部广告位'
                // }, {
                //     value: '1',
                //     label: 'e学云教育平台首页广告位'
                }, {
                    value: '2',
                    label: 'APP全屏广告位'
                }, {
                    value: '3',
                    label: '周边教育广告'
                // }, {
                //     value: '4',
                //     label: '课程学习广告'
                }],
                // 状态:0:审核中 1：驳回 2：上线  3：下线
                stateList: [{
                    value: '',
                    label: '请选择'
                }, {
                    value: '0',
                    label: '审核中'
                }, {
                    value: '1',
                    label: '驳回'
                }, {
                    value: '2',
                    label: '上线'
                }, {
                    value: '3',
                    label: '下线'
                }]
            },
            tableData: [],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            query: {
                provinceId: '',
                cityId: '',
                areaId: '',
                advType: '',
                advName: '',
                advState: '',
                advFounder: ''
            },
            multipleSelection: []
        };
    },
    created() {
        this.queryData();
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.queryData();
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },
        onSubmit() {
            this.pageQuery.currentpage = 1;
            this.queryData();
        },
        // getOrgUserBaseInfoByIdFu(obj) {
            
        //     getOrgUserBaseInfoById(obj.sCreator).then(res => {
        //         // sType类型 0:系统管理员 1:代理商 2:业务员 3:公司员工 4 其他
        //         if (res.content.sType == '0') {
        //             this.$message.info('不可操作此广告'); 
        //             return;
        //         }
        //     }).catch(() => {
        //         this.loading = false;
        //     });
        // },
        queryData() {

            let provinceId = this.query.provinceId; // 省id
            let cityId = this.query.cityId; // 市id
            let areaId = this.query.areaId; // 区id
            let advertType = this.query.advType; // 学校id
            let advertName = this.query.advName; // 服务ID 
            let advertStatus = this.query.advState; // 学校id
            let publishUserName = this.query.advFounder; // 服务ID 

            this.loading = true;
            listAdvert(
                this.pageQuery.currentpage,
                this.config.pageSize,
                provinceId,
                cityId,
                areaId,
                advertType,
                advertName,
                advertStatus,
                publishUserName
                
            ).then(res => {
                this.loading = false;
                if (res.data.status == 200) {
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination.total;
                } else {
                    this.$message.error(res.data.errorMsg);
                }
                
            }).catch(() => {
                this.loading = false;
            });
            
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        fn(row) {
           
            if ((row.sStatus == '1' || row.sStatus == '3') && (row.isAdmin != '0' && row.isAdmin != '3')) {
                return true;
            } else {
                return false;
            }
        },
        getState(val) {
      // 通过传递过来的参数判断是否是 上线/下线 &&  审核中/驳回
            this.$router.push({ path: `getImgState/${val}`});
        },
        // @action 传过来 广告类型 
        // @state 1 查看 2 下线 3 编辑 4 上线 5 审核 
        batchadd() {
            this.$router.push({ path: 'parcelMangement' });
        },

        // 查看
        btnView(obj) {
            this.$router.push({ path: `advDisplay/${obj.pId}`});
        },

        // 下线
        offLine(obj) {
            // this.getOrgUserBaseInfoByIdFu(obj);
            this.$confirm('确认下线【'+obj.sName+'】广告？', '', {
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', 
                title: '  '
            }).then(() => {
                
                let pId = obj.pId;
                let status = '3';
                this.loading = true;
                updateAdvertStatus(pId, status).then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })
            }).catch((e) => {
                this.loading = false;
                this.$message.info('已取消下线');     
            });
        },

        // 送审
        sendAudit(obj) {
            // this.getOrgUserBaseInfoByIdFu(obj);
            this.$confirm('确认提交审核【'+obj.sName+'】广告？', '', {
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', 
                title: '  '
            }).then(() => {
                
                let pId = obj.pId;
                let status = '0';
                this.loading = true;
                updateAdvertStatus(pId, status).then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })
            }).catch((e) => {
                this.loading = false;
                this.$message.info('已取消提交审核');     
            });
        },

        // 编辑
        edit(obj) {
            // this.getOrgUserBaseInfoByIdFu(obj);
            this.$router.push({ path: `editAdv/${obj.pId}`});
        },
        
        // 批量删除
        batchDel() {
            if (this.multipleSelection.length == 0) {
                this.$message('请选择需要删除的广告');
                return;
            }
            this.$confirm('确定删除选中广告？', '', {
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', 
                title: '  '
            }).then(() => {
                let deleteAdvertId = []; 
                this.multipleSelection.forEach(function(element) {
                    deleteAdvertId.push(element.pId);
                }, this);
                this.loading = true;
                removeAdvert(deleteAdvertId).then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })
            }).catch((e) => {
                this.loading = false;
                this.$message.info('已取消删除');     
            });
        },

        // 删除
        deleteList(obj) {
            // this.getOrgUserBaseInfoByIdFu(obj);
            this.$confirm('确定删除【'+obj.sName+'】广告？', '', {
                closeOnClickModal: false,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', 
                title: '  '
            }).then(() => {
                let deleteAdvertId = []; 
                deleteAdvertId.push(obj.pId);
                this.loading = true;
                removeAdvert(deleteAdvertId).then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })
            }).catch((e) => {
                this.loading = false;
                this.$message.info('已取消删除');     
            });
        },

        clipboardSuccessHandler(val) {
            this.$clipboard(val)
            this.$message({
                message: '复制成功！',
                type: 'success'
            });
        },
        clipboardErrorHandler() {
            this.$message.error('复制失败，请手动尝试复制！');
        }
    }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  padding: 0px;
  $bgcolor: #fff;
  .formInline {
    .formBtn {
      width: 100%;
      height: 70px;
    //   border-top: 1px solid #dddddd;
      position: relative;
      .btnPosition {
        position: absolute;
        right: 0px;
        top: 18px;
      }
    }
  }
}
</style>

